<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

<div id="app">
    <app-layout2>

    </app-layout2>
    <hr>
    <app-layout2>
        <p>有内容了</p>
    </app-layout2>
    <hr>
    <app-layout>
        <h1 slot="header">这是一个标题</h1>
        <p>内容</p>
        <p>下一个内容</p>
        <h1 slot="footer">联系信息</h1>
    </app-layout>
    <hr>
    <div class="parent">
        <app-layout3 >
            <template slot-scope="props">
                <span>页面上的内容</span>
                <span>{{ props.text }}</span>
            </template>
        </app-layout3>
    </div>
    <hr>

    <ul-for :items="items">
        <li slot="g" slot-scope="props">{{ props.text }}  &nbsp;&nbsp;&nbsp; {{props.ad}}</li>
        <li slot="h" slot-scope="{ad}">{{ad}}</li>
    </ul-for>


</div>


<script>
    // 具名插槽
    Vue.component('app-layout', {
        template: '\
            <div>\
                <header>\
                    <slot name="header"></slot>\
                </header>\
                <main>\
                    <slot></slot>\
                </main>\
                <footer>\
                    <slot name="footer"></slot>\
                </footer>\
            </div>'
    })

    // 单个插槽
    Vue.component('app-layout2', {
        template: '\
            <div>\
                <h1>子组件标题</h1>\
                <slot>在没有内容时显示</slot>\
            </div>'
    })

    // 作用域插槽
    Vue.component('app-layout3', {
        template: '\
            <div class="child">\
                <slot text="来自组件的内容"></slot>\
            </div>'
    })
    // 2.5.0+ slot-scope能被作用在任意的元素 不在局限于template
    Vue.component('ul-for', {
        template: '\
            <ul>\
                <slot name="g" v-for="item in items" :text="item.text" ad="123456"></slot>\
                <slot name="h" v-for="item in items" :text="item.text" ad="123456"></slot>\
            </ul>',
        props: ['items']
    })


    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {text: 1},
                {text: 2},
                {text: 3},
                {text: 4}
            ]
        }
    })
</script>
</body>
</html>